<template>
    <div class="page-content-normal">
        <div v-if="list.length">
            <div v-for="(item, index) in aclList" :key="index">
                <template v-if="!item.editShow">
                    <div class="flex-row" style="margin-bottom: 25px">
                        <div>
                            <div class="contentTitle_edit">{{ `MAC ${index + 1}` }}</div>
                            <div :id="'macRestrictListValue' + (index + 1)" class="contentValue_16B">{{ item.value }}</div>
                        </div>
                        <div v-if="item.editButtonShow" class="fr-edit">
                            <span :id="'editButton_' + (index + 1)" @click="editAcl(index)">{{ $t('common.editButton') }}</span>
                        </div>
                    </div>
                    <hr v-if="index != aclList.length - 1" />
                </template>

                <div v-else>
                    <el-form ref="editFormRef" :model="item" :rules="editFormRules">
                        <div class="flex-row">
                            <div class="contentTitle_edit"><star />{{ `MAC ${index + 1}` }}</div>
                            <div :id="'deleteButton' + (index + 1)" class="fr-edit" v-if="item.editShow" @click="clickDelete(index)">{{ $t('common.deleteButton') }}</div>
                        </div>
                        <el-form-item prop="value">
                            <el-input
                                :id="'macRestrictListValue_edit' + (index + 1)"
                                v-model="item.value"
                                onkeypress="return event.charCode >= 48 && event.charCode <= 57 || event.charCode == 58 || event.charCode >= 97 && event.charCode <= 102 || event.charCode >= 65 && event.charCode <= 70"
                                maxlength="17"
                                minlength="17"
                            >
                            </el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button id="saveBtn_edit" type="primary" round @click="editConfirm(index)" :loading="btnLoading">{{ $t('common.saveButton') }}</el-button>
                            <el-button id="cancelBtn_edit" type="info" @click="editCancel(index)">{{ $t('common.cancelButton') }}</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>

        <template>
            <div v-if="!isShowAddButton" class="n_row_100">
                <el-form ref="formRef" :model="form" :rules="formRules">
                    <div class="contentTitle_edit"><star />{{ `MAC ${list.length + 1}` }}</div>
                    <el-form-item prop="value">
                        <el-input
                            id="macRestrictListValue_add"
                            v-model="form.value"
                            onkeypress="return event.charCode >= 48 && event.charCode <= 57 || event.charCode == 58 || event.charCode >= 97 && event.charCode <= 102 || event.charCode >= 65 && event.charCode <= 70"
                            maxlength="17"
                            minlength="17"
                        ></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button id="saveBtn_add" type="primary" round @click="clickAddConfirm" :loading="btnLoading">{{ $t('common.saveButton') }}</el-button>
                        <el-button id="cancelBtn_add" type="info" @click="addSuccessCallBack">{{ $t('common.cancelButton') }}</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div v-else>
                <hr v-if="list.length" />
                <div id="addButton" class="add" @click="clickAddButton">{{ $t('common.add_mac') }}</div>
            </div>
        </template>
        <div id="Anchor"></div>
    </div>
</template>

<script>
import { REGULAR_RULES } from '@/constant/regularRules';
import { hasDuplicateItem } from '@/utils/common';
import scrollMixin from '@/hooks/scrollMixin';
export default {
    name: 'ACLList',
    mixins: [scrollMixin],
    props: ['list'],
    data() {
        const validValue = (rule, value, callback) => {
            if (!value) {
                return callback(new Error(this.$t('errorTips.cannotBeEmpty')));
            }
            if (!REGULAR_RULES.MAC.test(value)) {
                return callback(new Error(this.$t('errorTips.illegal_mac')));
            }
            const target = this.list.find((item) => item.value === value.toUpperCase());
            if (target) {
                return callback(new Error(this.$t('errorTips.equalMac')));
            } else {
                callback();
            }
        };
        const validEditValue = (rule, value, callback) => {
            if (!value) {
                return callback(new Error(this.$t('errorTips.cannotBeEmpty')));
            }
            if (!REGULAR_RULES.MAC.test(value)) {
                return callback(new Error(this.$t('errorTips.illegal_mac')));
            }
            const target = this.aclList.find((item) => item.value.toUpperCase() === value.toUpperCase());
            if (target) {
                if (hasDuplicateItem(this.aclList, target, 'value', target)) {
                    return callback(new Error(this.$t('errorTips.equalMac')));
                } else {
                    callback();
                }
            } else {
                callback();
            }
        };
        return {
            btnLoading: false,
            aclList: [],
            isShowAddButton: true,
            form: {
                value: ''
            },
            formRules: {
                value: [
                    { required: true, trigger: 'blur', message: this.$t('errorTips.cannotBeEmpty') },
                    { validator: validValue, trigger: 'blur' }
                ]
            },
            editFormRules: {
                value: [
                    { required: true, trigger: 'blur', message: this.$t('errorTips.cannotBeEmpty') },
                    { validator: validEditValue, trigger: 'blur' }
                ]
            }
        };
    },
    created() {
        this.formatAclList();
    },
    components: {},
    mounted() {},
    watch: {
        list: {
            handler(newVal, oldVal) {
                if (newVal !== oldVal) {
                    this.formatAclList();
                }
            },
            immediate: true
        }
    },
    methods: {
        formatAclList() {
            this.aclList = JSON.parse(JSON.stringify(this.list));
        },

        clickAddButton() {
            if (this.aclList.length >= 16) {
                return this.$message.error(this.$t('netWork.wifiSettings.max_macImum'));
            }
            this.controlAllEditButton(false);
            this.controlAddButton(false);
            this.scrollIntoView();
        },

        clickAddConfirm() {
            this.$refs.formRef.validate((valid) => {
                if (valid) {
                    this.startLoading();
                    this.$emit('add', this.form.value.toUpperCase());
                }
            });
        },

        clickDelete(index) {
            this.startLoading();
            this.$emit('del', this.list[index].value);
        },

        editAcl(index) {
            this.aclList[index].editShow = true;
            this.controlAllEditButton(false);
        },

        editCancel(index) {
            this.aclList[index].editShow = false;
            this.aclList[index].value = this.list[index].value;
            this.controlAllEditButton(true);
            this.controlAddButton(true);
            this.endLoading();
        },

        async editConfirm(index) {
            this.$refs.editFormRef[0].validate(async (valid) => {
                if (valid) {
                    let obj = {
                        delValue: this.list[index].value.toUpperCase(),
                        addValue: this.aclList[index].value.toUpperCase()
                    };
                    if (obj.delValue === obj.addValue) {
                        this.editCancel(index);
                    } else {
                        this.startLoading();
                        this.$emit('edit', obj);
                    }
                }
            });
        },

        addSuccessCallBack() {
            this.form.value = '';
            this.controlAllEditButton(true);
            this.controlAddButton(true);
            this.endLoading();
        },

        controlAddButton(status) {
            this.isShowAddButton = status;
        },

        controlAllEditButton(status) {
            if (status) {
                for (let i = 0; i < this.aclList.length; i++) {
                    this.aclList[i].editButtonShow = true;
                }
            } else {
                for (let i = 0; i < this.aclList.length; i++) {
                    this.aclList[i].editButtonShow = false;
                }
            }
        },

        startLoading() {
            this.btnLoading = true;
        },

        endLoading() {
            this.btnLoading = false;
        }
    }
};
</script>
<style scoped lang="less">
@import '@/assets/css/theme_blue/component_common.less';
@import '@/assets/css/theme_blue/component_straight.less';
.n_row_100 {
    width: 100%;
    min-height: 100px;
    line-height: 100px;
}
</style>
